Is it currently possible to set the background color of HTML5 video elements effectively? About HTML5 Audio and Video points to the fact that you can style video tags with standard CSS, but in my experience this isn't fully working:
On Chrome 23 (Snow Leopard) adding a poster image attribute to the video tag removes the background color, without a poster image it works as you might expect
On Safari 5.1.7 everything works correctly
Perhaps unsurprisingly Mobile Safari on an iPad running iOS 5 is a law until itself. The background color will always be black, no matter what I do. Occasionally I might get a flash of the set css background color before the poster / video load. But even with an empty video tag, the background color won't display.
Anyone had any success setting a background color on iPad?
Please refer to my question according HTML 5 on mobile safari.
Seems that it's impossible to control it, as video rendering is delegated to hardware through the browser, and is displayed "above", so controlling css properties of it would not affect anything.
My research was some ago, but don't think that since then anything changed.
Related
I'm using key frames to change the background image of a div, so far so good, the images changes as I expect.
However, on iOS devices, when I switch to other app and go back to browser, the background images disappeared.
iOS version: 14+
Tested on iPhone 7, 8, 11.
Browser tested: Chrome, Safari.
This does not happen on Android.
You can check this fiddle and test for yourself.
Any help appreciated!
As mentioned in the comment section, I'd put them here as an answer.
Since background-image is not an animatable property, it is not recommended to put background-image in a keyframe. Instead, try to separate each image in a different div then use keyframes to control the opacity of each of them.
Opacity is one of the properties that have good cross-browser support.
I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.
I tried several things to account for it, but had trouble finding the cause.
I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.
What would cause a discrepancy between the rendering of the same site and CSS on these two apps?
Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.
Chrome obeys the system-wide "Text Size"
If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!
From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.
So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".
Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!
Safari has a "Page Zoom" setting in Settings app
On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.
This setting can cause total chaos with CSS layouts at sizes like 200%.
Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.
Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!
I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).
However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.
In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.
And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"
Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:
Change bootstrap (if used) breakpoints to "em" instead of default pixels.
Make your components border, paddings and other stuff pixel based.
Another way is understand what are the users needs and react before they need to adjust the font-size:
Adjust font size based on viewport (css clamp)
Use responsive layout
Use css border-box, box-shadow...
Another way is recalculate everything, at much cost:
What if the user changes the root’s font size?
I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:
-webkit-text-size-adjust: none;
I hope it will help someone too.
I've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.
I have an issue with Chrome mobile where some text is rendered in bigger font size than it is in CSS. I checked in developer tool and find that those text have inherit the correct font size, but still rendered 5px bigger in the computed style.
I find this post Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
but -webkit-text-size-adjust doesn't work for me here.
I have checked in different mobile browsers including Dolphin, Opera Mobile and Safari, all rendered the text correctly except Chrome mobile.
Update: Solved, it caused by the setting of Chrome Mobile to render the text bigger. I don't think this is something we can block in the setting.
The issue is that between Chrome Mobile 18 and Chrome Mobile 25 the rendering of fonts changed. It appears that the Chrome scaling feature at 100% is actually up scaling the fonts. We had to set the Chrome scaling feature down to 85% to get the fonts to not upscale.
Also it appears that if we touch anything on the web page the fonts on the page re-adjust to the proper size. This shifting between scales is VERY concerning as it affects applications is an extremely negative way. Especially if you are attempting anything that needs to ensure any psychometric validity.
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...