Hi Mike

I’m happy to report your solution and guidance did the job ;) thank you so much, what a supportteam you guys have!!

To sum it up

Inline CSS (Code Block) added to the contact page

<style>
@supports (-webkit-overflow-scrolling: touch) {

.responsive .boxed#top {
max-width: 350px !important; 
width: 350px !important;
}
}
</style>

Quick CSS added

.mfp-bg {
background-color: #657b96 !important;
}

@supports not (-webkit-overflow-scrolling: touch) {
.mfp-iframe-holder .mfp-content {
    width: 50% !important;
    min-height: 51vh;
}

.mfp-iframe-scaler {
    min-height: 51vh;
}

.mfp-iframe-holder .mfp-content {
    width: 50% !important;
    min-height: 51vh;
}

.mfp-iframe-scaler {
    min-height: 51vh;
}
}

/*iPhone only - ios*/
@supports (-webkit-overflow-scrolling: touch) {
.mfp-iframe-scaler iframe.mfp-iframe,.mfp-iframe-scaler iframe,div.mfp-content {
max-width: 400px !important;
}
}

Thanks Mike
That seem to have fixed it on iOS: https://youtu.be/LjMF4XWmPb4
There’s just a small spacing to the right on the iPhone.

Need to fix the css to only apply on smaller devices, then I think I’m good to go. It very small on my 27″ now ;)

Is there a reason to why you add the style on the contact page directly?

Awesome support ;)!!

Hi Mike

Tried to remove it, and also adding the modified CSS. No difference sorry. I’m also disabling my W3 caching to be sure I’m not reviewing old code. I added the color section in hope of being able to throw some CSS its way. Also thought about having two versions on the contact form depending on what device was viewing it. But the CSS seems to have no impact in my testing.

Sorry I don’t know any iOS emulators.

Best regards,
Gudi

Hi Mike
Thank you for your support, much appreciated!

My line 65 was already like this
<meta name="viewport" content="width=device-width, initial-scale=1">

I tried the other user-scalable=yes and the website then displays as on a PC. The full width of the website. But the lightbox pop-up is the same on iOS. Even tried to add maximum-scale=1 – but the outcome is the same.

It seems to me as if the lightbox at first opens at 50% width, but then before the content is loaded bloats up 400%.

Thanks, case closed

I’m on Windows 10 and I also have the problem on Windows 7 and Windows 2008 R2.
My current Chrome is version 46.0.2490.86 m

Cache and history deleted, still the same problems. See screenshots. Maybe you don’t have the errors on Mac.

As I said, I sometime can get parts of the images to show, if i refresh the page while “standing on the area where it should have been”. But the “scrolling” doesn’t work and every other images is gone.

See images below

I’m unable to launch our site until this is fixed :(

Every part of W3 Total Cache has now been enabled, disabled and now the plugin is once again disabled.

When I’m in Chrome and look at one of the empty space, it sometime shows the images (or at least some of it) if I refresh the page. But only a part of it, and none of the other sections which isn’t in frame. This is not something new, this was also the case before I did the above.

The site is on a demo location, so you’re allowed to add/remove content and plugins.

Try removing the submenu – the debug mode is enabled – so it’s fast to readd – or recreate with random a b c menu.

• This reply was modified 9 years ago by Gudi.

This happens with EVERY plugin disabled

The link below in the private content shows you the link, where the errors show in Chrome.
If i remove the submenu, the images show. However when i re-add or recreate the menu, they disappears.
https://kriesi.at/support/topic/fullwidth-submenu-causes-chrome-visual-errors/

I just tried to copy the content from the DEBUG into a new website. Now the color sections display images in Chrome, but the submenu hangs below the main in both Firefox and IE. Also the colors of my headlines have changes from white to black, but that’s easy fixed. Thought it was copied in the code though.

guys?

I’m unable to enable DEBUG – so I’ve added FTP credentials.

I remember at some point the DEBUG no longer showed below the editing box – as this was my way of copying from the demo site to the running site. Just trying to add facts to try and find the reason for this behavior.

Hi Andy
I’ve got a hold of the hosting company. I think the error might occure from the W3 Total Cace that’s running in the root directory (another wordpress installation). I’m seeing some funky stuff, but I’m back to being positive as I’ve got the data recovered.

Will give you tip a go, when the site is running properly

Had the website restored by the hosting company. The site is back to the stage, where Chromes doesn’t show the images but Firefox does.

• This reply was modified 9 years, 1 month ago by Gudi.

Here you go, cheers

• This reply was modified 9 years, 1 month ago by Gudi.