Hello,
We have a key page that displays as it should under all browsers under all devices (desktop, laptop), but it is broken under Apple Chrome ONLY! A sample is here:
As requested, here is the Screen Shot of this page under Apple Chrome. Where as you can see the 2nd and 3rd Columns which should line up next to the 1st column via display: inline-block are broken below it!
Erik, posted the Screen Shots as you requested. So I was wondering do you have a solution to this bizarre problem that ONLY and ONLY happens on Apple Chrome?
OTN, you know these browser makers are supposed to follow Open Standards, so how can a Page look 100% FINE on ALL browsers on ALL devices but then break on one browser on one device? Amazing i mean this page looks 100% fine under Chrome on PC, but it just breaks under Chrome Apple!!!
Anyway, if you have suggestion about how to fix it that will be GREATLY appreciated since after Months of development we want to put this Big new release live.
If not, then I have to put Tables around these inline-block DIVs from breaking.
do you have any code to ensure the browser knows how to include margin/padding. e.g.
box-sizing:border-box;
this then forces the margins to be included in the widths rather than adding it on. Generally when something drops like that it’s due to something being too wide.
Because they might differ in how intelligent their browsers are to detect errors and to interpret the intentions of the design and trying to compensate or correct errors.
So, you still have a number of errors I think could make browsers differ in rendering, like:
9…style tag not allowed as child of body
12…div not allowed as child of a span
13…div not allowed as child of a span
16…style tag not allowed as child of body
38…style tag not allowed as child of div
44…style tag not allowed as child of tr
45…div start tag seen in table
Try to fix, if not all, at least these errors and post again.
In the screenshot of the broken layout in apple it looks like the header is messed up too.
I see the “Home” nav link hanging down further than the other links. I think that could cause the inline block to snag and force it to drop down since it can’t vertical-align:top
The link in post #1 does not lead to a page where the nav links on the top right can be seen so it’s hard to see what’s happening.
If the code on the page does not follow the standards, then the standards just are not there whether the browser implements them properly or not.
It’s case of going thourough the validation results one by one, reading what it says the problem is for each line and putting it right.
There may seem a lot, but some structural errors can have a knock-on effect, so fixing one problem may fix a number of errors in some cases.
Again, the page loads 100% OK on ALL Web browsers on ALL Devices, including on Chrome on PCs.
It is only Chrome on Apple that breaks the page, so we can then conclude that the problem is not with the Code of this page but with Apple Chrome.
And BTW, you can run this very page of SitePoint through https://validator.w3.org/ and you will get back many Error reports about it.
Now to add insult to injury, on Apple Chrome which is the ONLY browser that breaks this page, if you activate Developer Tools panel, then then the page is rendered OK!
It is Chrome 71.0.358.98 (official build) 64 bits
And yes these pages display 100% OK All browsers on ALL Devices, including Apple Safari, it is just Apple Chrome where the page is broken!
This very page has 2 warnings and 3 errors:
1… consider avoiding…
2… type attribute unnecessary…
3… meta tag is missing attributes…
4… a p end tag is seen.
5… a p end tag is seen.
Actually the page is broken in all browsers. That any browser displays it as you think it should look is only happenstance. Expect GIGO and do your best to avoid that. The first step is to fix as many validation errors as you possibly can.