Bizarre CSS problem in Chrome under Apple only!


#1

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:

https://www.anoox.com/my/share.php?i=136950

What to we need to do to fix it under Apple Chrome which shows the inline-block 2nd and 3rd main columns broken away from the 1st such column?

Thanks


#2

Could you post an image that allows nonApplers to see the error too?

Maybe if not solve anything, we might perhaps guess more intelligently. :slight_smile:


#3

I’d suggest you validate the code first, as without valid code, all bets are off.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.anoox.com%2Fmy%2Fshare.php%3Fi%3D136950


#4

Erik,

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!

And of course you can see how this page looks fine under ALL other browsers and other Devices on your own. But here is a screen shot of this as well:

And FYI the CSS that is to give these DIVs their inline-block formats are:

#main_holder, #mem_holder, #mix_holder {
	font-size: 1rem;
	margin-left: 1%;
	display: inline-block;
	vertical-align: top;
	min-height: 550px;
	background: white;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
}

#main_holder {
	width: 55%;
	min-height: 650px;
	padding-bottom: 100px;
}

#mem_holder {
	width: 16%;
	margin-left: 5%;
}


#mix_holder {
	padding-bottom: 50px;
	width: 16%;
	margin-left: 1%;
	background: #DCDCDC;
	padding-right: 5px;
}

Thanks.


#5

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 :frowning: 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.


#6

Have you tried fixing the problems with the HTML that @TechnoBear mentioned in post #3 ?


#7

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.


#8

Good point @Noppy, but border-box is including border/padding. I think you made a marginal typo. :stuck_out_tongue:


#9

What version of apple and what version of Chrome?

It doesn’t break on my apple imac in Chrome or Safari.


#10

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. :wink:


#11

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.


#12

That’s probably why my mac isn’t showing the problem:slight_smile: )


#13

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.


#14

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!


#15

I added this:
box-sizing:border-box;
to the Parent DIV but the problem persists, again ONLY with Chrome on Apple.


#16

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!


#17

On what version of the Apple operating system are you running Apple Chrome?

Why don’t you fix the errors shown by the validator?

Do you not believe that they might matter to Apple Chrome?


#18

Let me check that…

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.

The html on this page is 204.7 kB and growing. :slight_smile:

The html on your page was 29.0 kB. :wink:


#19

…And if this does not set off alarm bells:-

Fatal Error : Cannot recover after last error. Any further errors will be ignored.

I don’t know what will.


#20

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.