I'm seeing some significant differences in how browsers are repeating sliced border images. It's easily demonstrated on https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
MacOS 10.14.6 Safari 12.1.2
MacOS 10.14.6 Firefox 91.0.1
MacOS 10.14.6 Chrome 92.0.4515.159
So it appears that Safari on MacOS Mojave has an issue. Simple enough if that were the case. But mobile browsers on iOS are also behaving differently.
iOS 14.6 Safari
iOS 14.6 Firefox
iOS 14.6 Chrome
Does anyone have any insight into why these browsers behave differently? Does anyone have insight into how to get the un-stretched results in all browsers that MacOS Firefox and Chrome have?
Essentially, what you are seeing here is Safari behavior vs. the behavior of all other browsers, which sadly is a common frustration of many developers— Safari functioning differently and usually unexpectedly.
What you are seeing on iOS (mobile) is to be expected, because although there are different browser apps, all of them, even Chrome and Firefox are actually Safari (using the Safari browser engine, WebKit), simply reskinned with a different UI. There is only one iOS browser in actuality.
Supporting source #1: https://www.reddit.com/r/firefox/comments/9lpmkh/
As we all know Apple forces all third party browsers on iOS to use WebKit, essentially making them just re skinned versions of Safari; This puts Gecko Based Firefox and other Third party Browsers at a performance disadvantage.
Supporting source #2: https://www.quora.com/Is-Chrome-for-iOS-just-Safari-re-skinned
Google wasn't just being lazy using Safari's rendering engine. Apple requires people making browsers to use the UIWebView object. [This] means “exactly the same rendering engine”.
To be clear, this is a bug in WebKit/Safari. I have opened an official bug report to resolve this: https://bugs.webkit.org/show_bug.cgi?id=229803
This github link I encountered last time shows that border-image in safari is seems to be not solved.
https://github.com/Fyrd/caniuse/issues/2366
Regular fonts look normal, but large fonts look jagged in Chrome (not in Safari or Firefox). I'm using a Macbook Pro running Mojave.
Example codepen
.large {
font-size: 300px
font-weight: bold
}
Chrome
Safari
Firefox
I've tried the recommendations in this SO post (enable-font-cache-scaling and accelerated 2D Canvas), but the issue remains.
Turning chrome://settings "Use hardware acceleration when available" OFF fixed it for me.
At first I was not able to reproduce the jagginess/blockiness, but I realized I was looking at it on MacOS [High] Sierra, and you specified Mojave. So I tried it there, and it is absolutely awful. I'm really surprised this escaped anyone's notice in testing. I'd imagine there will be an update to either Chrome or Mojave that addresses this soon.
I guess this is actually related to a change to the OS defaults; Apple apparently disabled sub-pixel font rendering in Mojave and passed it off as a "refinement". Sub-pixel rendering is handled by the GPU, hence disabling GPU rendering in Chrome "fixes" it. I guess you could also use the defaults write technique specified in the link I mentioned.
In any case: this is probably not something you can address in your CSS code, since it is related to user-local/machine settings.
What is the min version of each browser (IE, Chrome and Firefox) for LESS running on client-side?
According to http://blog.montylounge.com/2011/07/31/one-thing-about-lessjs/ it's IE6+, although they don't specify which versions of Chrome and Firefox are supported. I would assume far enough back that it shouldn't cause you any problems.
I'm trying to figure out some layout issues with Safari Mobile 3.1.1. – I want to know whether or not I can view sites with the SDK before I commit to installing it on my Mac.
My other dumb question is… does changing the user-agent string used by desktop Safari have any affect on how it renders CSS? I understood that the UA string just announces which browser version is behind the request.
I've never had a problem with either of those two things.
The UserAgent string isn't intrinsic to the version of the WebKit library, I don't think -- you can install a webkit build alongside the OS Safari and it'll work fine:
http://nightly.webkit.org/
... if you embed a UIWebView in your app, you can use whatever UserAgent string you like (see this question).
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.