-
Posts
-
The Enfold website we’re working on looks good in all browsers, but Microsoft Edge has strange display issues. If you scroll down the page once, everything looks fine, but when you scroll up, the background color changes to dark red by itself and the background images disappear, so that texts are no longer readable. If you scroll up and down several times, the background remains dark red or the colors change randomly, between normal and dark red. If you try to examine the elements in Edge, the colors change back to the normal view, so you can not tell in CSS what causes this behavior. We have noticed that this only happens on pages with several color sections in use, so that probably has to do with it, but we could not locate the cause and ask for help. We will gladly provide you with the access data.
Hey heartbit,
What Edge version are you using? I did just tried and works just fine for me I could see that issue.
Also, are you sure it is not related with your Video Card?Best regards,
BasilisHey Basilis,
thanks for the feedback. We use Microsoft Edge 44.17763.1.0. The problem is definitely not related to the graphics card, because it also occurs on 3 different PCs and in other Edge versions. Please try it on other PCs and pay attention that the background color of the website only changes after it has been once scrolled to the end of the page. The problem occurs when you scroll back to the top of the page.
Many Thanks.
Best regards,
heartbit
Hi,
Thanks for the update.
I can’t reproduce the issue on IE 11, which is an older browser by any means. Could you give us a screenshot using imgur or dropbox?
Best regards,
IsmaelHi Ismael,
thanks for the feedback. Maybe I make a mistake in thinking, but I imagine forensic work as follows: If I want to reproduce an issue, then I’ll do it in the environment that corresponds to the detailed description and not in an environment that’s “similar” to it. Accordingly, a conceivable explanation that you can not reproduce the issue in IE11 could be that IE11 and Microsoft Edge are not the same!
We are not an end customer, but a web design agency. So far we have 6 licenses of Enfold in use. Actually, we think Enfold is a good solution and we would like to use more licenses in future, but if we have to wait more than 10 days for an issue to be processed and it turns out that the support is a waste of time, which has been the case so far, then the question arises how useful Enfold is as an option for future projects. Has the message arrived, or do you need a screenshot for that too?
Best regards,
heartbitHi,
Thanks for the update.
Unfortunately, I don’t have access to Microsoft Edge or to a Windows 10 machine for that matter, so I tested it on what’s available in my test environment, which is IE11 thinking that an older software probably inhibit the same issue as its successor. I thought that was implied. Yes, we do need a screenshot. Seeing the actual issue will probably give us a hint on what to fix.
Best regards,
IsmaelHi,
I can’t open your zip file. Could you upload the screenshot on imgur or dropbox?
Best regards,
IsmaelHello Ismael,
thanks for the feedback. Microsoft Edge hasn’t the slightest resemblance to IE11 because this browser has been completely reprogrammed. I was upset about your post because the problem description clearly states that the problem only occurs in Microsoft Edge, but I respect your good will. Still, if you don’t have Microsoft Edge, I doubt you’ll be able to help us.
The ZIP file works fine with me, which is why I’m surprised that you can’t open it. I’ve made the screenshots available for download. The first 7 screenshots show parts of the “normal” view of the start page when first scrolling down and the last 3 screenshots show the wrong view when scrolling up.
Regards,
heartbitHello,
after almost 2 weeks since we asked for support, there was no one who could provide a qualified answer or help. This is a very poor performance, extremely unprofessional and no good advertisement for Enfold at all.
We would be very happy if there were anybody in the support team who could turn this miserable performance into a positive one.
We ask for help again.
Best regards,
heartbitHi,
Thanks for the update.
That is quite odd. Try to increase the stack order of the color sections, so they remain above everything else.
.avia-section { position: relative; z-index: 100; }I’ll ask the rest of the team to check it on Edge.
Best regards,
IsmaelHi,
Thank you for the screenshots, I have taken a look at your pages with Edge on Windows 10, and I see the issue you describe. I see that the header weaves in and out, above and below the color sections as I scroll down, and with the core background color being red,.html_stretched #wrap_all { background-color: #800000; }in some of the sections this background color and header is getting a higher z-index, but as you point out inspecting it is difficult.
First, how do you want the header, on top as you scroll down, or behind?
Then please include an admin login in the Private Content area so I can check your css and try to correct.Best regards,
MikeHi Mike,
thanks for the feedback and your support. Attached you will find the access data.
Basically, we want the site to work in Microsoft Edge as much as possible in the same way as in all other browsers.
Best regards,
heartbitHi,
Thank you for the login, please enable the WordPress > Design > Theme > Editor option, or provide ftp access, I believe I’m making headway but I need to check on something with your child theme.Best regards,
MikeHi,
Thanks, I had a hard time with caching & Edge, so right now your cache plugin is off along with your merged css, but I believe the issue is resolved. Please clear your Edge history & cache a few times to check, once you are satisfied you may turn the caching back on if you wish.Best regards,
MikeHi Mike,
thank you very much for your commitment. Strictly speaking, the same behavior is still there in Edge, with the difference that the background color no longer changes in dark red, but in white, so that it only stands out when you look closely.
I’ve added the hint of Ismael as an edge hack and now this strange behavior is even less noticeable:
/* MS EDGE Hacks */
@supports (-ms-ime-align:auto) {
.avia-section {
position: relative;
z-index: 500;
}
}Because of the loading times, I have turned on the CSS compression again and it works so far, everything is fine.
What exactly did you change, because in CSS I could not detect any change? An additional code snippet was present in CSS, but I deleted it because it was obviously just an attempt with no effect. That would be important to know for the future and maybe interesting for other users as well.
We were very upset because the support was initially not professional and it took a very long time, but the result counts. The solution isn’t ideal, but we can live with that and the customer will be satisfied too!
Many thanks to Mike and Ismael! We really appreciate your help!
Best regards,
heartbitHi,
The css you deleted was to place the background for the white color sections, and to not use the “main_color” class to add a background image. The “main_color” class is used in many elements including the ones you don’t want the background image in.
But in the end your issue seems to come from the Enfold Theme Options > General Styling > Logo Area > Logo Area background color, when this was red Edge was adding it to the color sections.
I have not been able to recreate this on a clean install yet, but I will contenue to investigate.
The problem with Edge is that it’s very strict in how it processes, where other browsers are forgiving.
We are sorry for the delay, but I glad that together we were able to assist with a solution for your customer.Best regards,
Mike
- You must be logged in to reply to this topic.