I have an older Android phone (circa late 2011-2012 that I use for live testing as opposed to just BrowserStack). Using the default Android web browser when the slider loads the images won’t. If I remove the gradient over the images they load fine. Doesn’t appear to be impacting newer devices.
Is there a CSS or other adjustment I can make to correct this. I realize that browser is crap but people do use it.
I realize that I could gradient overlay the photos prior to uploading them but I’d like the flexibility to change the overlay.
I had a similar but not exact same issue with some older version of IE (7,8) when I started with Webflow. IE wouldn’t render the gradient and that was altering the content of those elements. The workaround was to set a bakground color along with the gradient. All browser would render the gradient, and IE would render the color, not altering more content.
Hmmm. Tried adding a background fill to the slide but no love. If I remove the gradient overlay the image shows but otherwise no. You gave me another idea though.
Right. I’m trying to decide. It’s actually for my own site and I like to deliver to as many devices as possible. It’s not working in IE9 either. I’m thinking that the easiest fix is just to overlay the photos prior to uploading and that’s acceptable. Not being sure how the gradient overlay is impacting other Android stock browsers makes me a little nervous since usage is pretty high.
Maybe it’s time to let go of IE9 and the older Android stock browser. Competition in my market still supports though…although for the most part they play it super safe with rarely any interactions or features to improve user experience.
Suggestion: If the gradients are static in relation to the underlying image (no transitions) just create them in Photoshop or create an instance on a temporary page and screen capture the result (uncropped) and upload an optimized jpg of it as the image. The result would be the same and work on any browser with improved efficiency for the CPU / GPU. - just a thought.
@vlogic I appreciate your suggestion and adding the overlay prior to upload was something I mentioned earlier. And it’s what I may resort to doing. However, I’d like to work through this for other reasons. I could also add a filter that would work in IE but I’m wondering if because their are two items in the section background (image and overlay) if it won’t work at all.
caniuse.com is a great resource to help you quickly contextually establish the scope of a css properties support / popularity and use of a given browser (geographically) as well as resources and links to recommended work arounds for poorly supported browsers. It can help you to weigh the real costs of dev time and potential segment of the population you may be excluding. Sometimes it is cheaper to buy .001% of your audience a new device
edit to remove a rant of sarcasm - sorry, I am going through a tough week with some of these very issues with clients who presume that I am responsible for their browser being minimized in a task bar (website is not working) and instantly fire off a white hot email to the entire agency as an unacceptable crisis that must be fixed immediately. I agree with them - it should be
@vlogic No worries! I understand. Really, I have a solution (if I want to use it) to the problem, which is adding the gradient prior to upload and that’s mostly likely what I’m going to do.
I’m familiar with caniuse.com and agree that it is a good resource. Looking at data from StatCounter and combining it with Caniuse is a good start to figure out what to support.
Partly, I’m still trying to figure out what code WF produces (seems very clean for the most part). The gradient doesn’t show in IE9 and I saw that’s been addressed here Gradient in IE 9 doesn't work - General - Forum | Webflow. I’d live with no gradient showing in older browsers or I could give the section an id and add my own filter gradient via css…but only if the image behind would show…that’s where I’m slightly confused why it’s not. I guess the background and overlay are packaged together but haven’t been able to sort out exactly what’s happening.
