It seems to me that this example is like undefined behavior in C.
A div that looks different in every browser
21–30 of 133 posts
Re: A div that looks different in every browser
#22Here's an animated version with some transparency https://codepen.io/anon/pen/PaMVYX?editors=0100
The root issue is that the browsers are being asked to draw a line that's 100px in from the edge of a 100px box -- it's an impossible task, so there's no perfect solution.
This CSS test suite http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/x... suggests that browsers should treat it as though it were the largest offset that made sense at the current outline width, giving you https://codepen.io/pjwdev/pen/vrovPR?editors=0100
Safari achieves this if the border is the same colour the whole way around, but doesn't get the individual sides in a sensible arrangement.
Edge doesn't match the test, but it does another reasonable thing -- it takes the offset as a given, and uses the biggest outline width that makes sense.
Chrome and firefox...
Re: A div that looks different in every browser
#23And GoogleBot seems to follow Safari's rendering instead of Chrome: https://developers.google.com/speed/pagespeed/insights/?url=...
I wonder if that’s because they’re just running an older version of WebKit/blink.
Re: A div that looks different in every browser
#24Is one of these correct? Or is this combination of CSS properties ambiguously or un-defined by the spec in the first place?
The code in question can be mostly boiled down to: outline: inset 100px green; outline-offset: -125px; The issue is: - spec is deliberately liberal about how outline should look (this is kind of a similar case to forms and scrollbars, the styling of which varies not just by browser, but by OS/toolkit) - inset is a keyword rarely if ever applied to outlines (and I'm not sure why it's even valid or what it's purpose wo…
Fiddling with it:
Firefox's mistake is definitely that it isn't handling having outline-offset less than "-min(width, height)/2" in a sane way. (In the demo, width and height are both 100px; it starts do do funny things when outline-offset goes below -50px). That said, I'm not entirely sure that there is a sane way.
IE is totally ignoring the outline-offset property; it isn't implemented in IE.
Re: A div that looks different in every browser
#25On one hand I think this is really neat. On the other this is why I have never taken front end development seriously enough to spend any real time learning it [0]. From the get go it always seemed like the rules were arbitrary and involved lots of guessing to get things right. I know this isn't actually true but it felt true enough early on to poison my mind to it. [0] Not something I'm proud of and I know front end…
Honestly its getting rarer and rarer to find things like this, most things that reasonable people want to do "just work."
You have to go to considerable effort to come up with a case like this.
Re: A div that looks different in every browser
#26Earlier quoted context omitted.
Try writing C meant to compile in different compilers, on different processor architectures. Or ANSI SQL meant to run in a variety of RDBMSes. Web GUI is not the only bastion of arbitrary behavior. I would wager, if your goal is to make as wide-spread, cross-platform GUI as possible, a Web GUI is the easiest way to do that, for both the developer and the users.
This is a great point and I appreciate you pointing it out. Cross platform development is hard regardless of which part of the stack you're developing for. The reason development for the browser stands out for me is that when I build a web app I can control to a certain extent what environment the server is deployed in and then I don't have to worry too much about different platforms. However I have no control over w…
It's pretty easy to control, just detect which browser and throw up a screen saying that browser isn't supported or "use at your own risk." I don't see any distinction between cross platform support and cross browser support.
Re: A div that looks different in every browser
#27Microsoft is the only one that gets it right.
Re: A div that looks different in every browser
#28On one hand I think this is really neat. On the other this is why I have never taken front end development seriously enough to spend any real time learning it [0]. From the get go it always seemed like the rules were arbitrary and involved lots of guessing to get things right. I know this isn't actually true but it felt true enough early on to poison my mind to it. [0] Not something I'm proud of and I know front end…
Honestly its getting rarer and rarer to find things like this, most things that reasonable people want to do "just work." You have to go to considerable effort to come up with a case like this.
What is the status quo on vertical alignment if I may ask..
Re: A div that looks different in every browser
#29Earlier quoted context omitted.
Honestly its getting rarer and rarer to find things like this, most things that reasonable people want to do "just work." You have to go to considerable effort to come up with a case like this.
What is the status quo on vertical alignment if I may ask..
Re: A div that looks different in every browser
#30On one hand I think this is really neat. On the other this is why I have never taken front end development seriously enough to spend any real time learning it [0]. From the get go it always seemed like the rules were arbitrary and involved lots of guessing to get things right. I know this isn't actually true but it felt true enough early on to poison my mind to it. [0] Not something I'm proud of and I know front end…
It is frustrating as here we are in 2019...er 2018 and structring a page is still kinda wonky.
Except for the fact that in 2018 it's actually not wonky at all.