Various Browser Display Errors

Support
#1

While I have largely been enjoying getting to know X Pro better, there have been a few things that have thrown me for a bit of a loop. Particularly, visual display errors in every browser that isn’t Chrome.

If you could take a look at the following page, it displays perfectly in Chrome, but the following browsers display a pretty large degree of errors, and I’m not sure how to sort them all out?

https://test.betdsi.com

Firefox: All of my overlapping rows/sections are displaying really oddly on that page.
Edge: Similar negative margin issues
Internet Explorer: Just a complete nightmare on every page o_O

If you could help me address the negative margin items, that would be a terrific starting point.

Thank you!

#2

Hey @Nuera,

The only issue I noticed in Firefox and Edge is your responsive mockup.

You’re using negative margins to its container. It will only work for simple layouts. In this case, your image is in a separate section. Please put your image in a column and use positioning CSS.

For IE, you’re using SVG for your background images. IE does not support that.

Thanks.

#3

Sorry, I might need a couple clarifications back and forth here.

10-4 on the SVG images (though I’ve never seen that issue on other sites using IE).

Could you help me better understand what’s the limitations are for the negative margins? Can I not move items into other sections?

Thanks

#4

The negative margin actually works for your container. The image inside it is pushed down by the element above it though.

Try applying the negative top margin to your image.

Regarding SVG, sorry for the confusion. Just saw it’s fully supported. But, can you try replacing it with PNG just for troubleshooting purposes?

Thanks.

1 Like
#5

Ok, thank you for your help with the negative margins - I got those figured all on all browsers!

Now we’re just left with the SVG issue - which I would really prefer to fix, as opposed to abandoning the benefits for a minority of browsers.

The only commonality I’m noticing is that is affecting backgrounds on both columns and sections which feature an SVG in the background. Is there something we can do to offer better support for SVGs in IE?

Thanks!

#6

Generally, though SVG has an advantage, it should be avoided since WordPress itself does not allow SVG to be uploaded out of the box for security reasons. Also, it requires additional structural code to display nicely when used in HTML so it is not supported in X / Pro as well.

Regarding the CSS background, I’m not sure why that is happening in your site. It might be a formatting issue. That is why I recommended that you try PNG for troubleshooting purposes. In my previously reply though, I said I just knew that it is supported as a background. I tested it in my test site and it works so there might be something in your site causing this.

Would you mind trying PNG just for troubleshooting purposes? Maybe the issue is not in the background image.

I see one of your images is PNG and it works in IE.

Thanks.

#7

I find firefox to be really bad when adding new elements - 65% of the time it will just fail. Chrome on the other hand works really well with very few browser conflicts if any.

#8

Thanks for chiming in, @outer_net.

#9

Ok, so replacing the SVGs with a raster image PNG/JPG obviously works, so can we move on to the next stage of the troubleshooting?

I’ve noticed that the two issues with the SVGs in IE seem to be in the Section, Row & Column backgrounds’ image size settings. Whether I’m setting the background to Cover, Auto, 100vh, or 100vw, it just won’t cover the entire visible area.

The same is true whether I have images set to repeat or not (though it always makes slight changes in the way it appears).

Is there some kind of exception we could input that would at least address the ‘Cover’ and ‘Auto’ size commands in IE?

#10

First off, viewport units have some rendering issues in IE. Please keep your background simple if IE is important to your project. There is no way to get around it without custom development.

Thanks.

#11

As their users’ usage of IE is only .086%, I’m ok with just letting it lie this time around. However, if Themeco is claiming to support both SVG and IE, I feel like a little deeper dive might be in order for similar/future requests.

We are living and working through transitions in the web all the time, and employing vector solutions is going to be a much bigger deal in the future than has been in the past. Frankly, I’m not all that concerned with what Wordpress has to say about it, either… If we are to think in a progressive way about how we develop, then obvious solutions pertaining to filesize and render clarity should be at the very forefront of the conversation.

Sorry to wax philosophical here… I do really appreciate your assistance. It is just part of our agency’s internal philosophy to never rest on our laurels, and instead search for every possible solution.

Thanks again for your help :slight_smile:

#12

Hey There,

You’re most welcome. Glad we were able to help you out in anyway you can.
We also thanked your feedback. It has been noted and will be brought to our developer’s attention.

Best Regards.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.