Why does one translate differently from the other?

HTML & CSS
1

View these both in Internet Explorer.

How come they both look different?

Html one is all messed up, while the css one looks fine.

Why is this?

If they are both the same code?

Left is CSS / Right is Html

CSS

.crossed {
    width: 266px;
    height: 266px;
    border:  3px solid red;
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 3px),
           rgba(0,255,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 3px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,1) 0%,
           rgba(0,0,0,1) calc(50% - 3px),
           rgba(0,0,255,1) 50%,
           rgba(0,0,0,1) calc(50% + 3px),
           rgba(0,0,0,1) 100%);

<div class="crossed"></div>

HTML
<div style="width: 266px; height: 266px; border: 3px solid red; background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 3px), rgba(0,255,0,1) 50%, rgba(0,0,0,0) calc(50% + 3px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(50% - 3px), rgba(0,0,255,1) 50%, rgba(0,0,0,1) calc(50% + 3px), rgba(0,0,0,1) 100%);255,255,1) 50%, rgba(0,0,0,0) calc(50% + 3px), rgba(0,0,0,0) 100%);"></div>

2

That’s weird,

Internet explorer accepts this.

But won’t accept it on blogger, and the image is all messed up.

3

This may explain why.

4

But are they the same code?

Go through your inline styles and compare them very carefully, line by line, with your CSS.

1 Like
5

It’s the same as this, nothing different.

The CSS is exactly the same as this, nothing different.

 <div style="width: 266px; height: 266px; border: 3px solid red; background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 3px), rgba(0,255,0,1) 50%, rgba(0,0,0,0) calc(50% + 3px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,1)
0%, rgba(0,0,0,1) calc(50% - 3px), rgba(0,0,255,1) 50%, rgba(0,0,0,1) calc(50% + 3px), rgba(0,0,0,1) 100%);"></div>
6

On firefox they both look normal.

7

In your first post, there is a difference between the CSS and what you have terned HTML, which is actually inline styles.

The same difference exists in the JSFiddle to which you linked in that post.

I don’t have IE handy to test on just now, but that difference might well account for the odd rendering.

8

Is this one still different?

<div style="width: 266px; height: 266px; border: 3px solid red; background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 3px), rgba(0,255,0,1) 50%, rgba(0,0,0,0) calc(50% + 3px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,1)

9

Why have you only posted part of the code? Post the whole <div>.

10 
 <div style="width: 266px; height: 266px; border: 3px solid red; background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 3px), rgba(0,255,0,1) 50%, rgba(0,0,0,0) calc(50% + 3px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,1)
0%, rgba(0,0,0,1) calc(50% - 3px), rgba(0,0,255,1) 50%, rgba(0,0,0,1) calc(50% + 3px), rgba(0,0,0,1) 100%);"></div>
11

Yes, that looks the same now. Does it work?

12

no…

13

Do you mean that that code works on Blogger, but doesn’t display correctly on IE, or that it doesn’t work on Blogger at all?

14

IE11 and edge are buggy with ‘calc’ at the best of times and when used in linear gradients (or things like translate and transforms) then things start going wrong.

In your fiddle (with code corrected) both versions work in IE11/edge when run natively (outside of jsfiddle). However if you open the inspect panel in IE then both versions revert to the incorrect version. This also happens in your fiddle and if you open the inspect panel both examples are messed up.

This suggests that IE is buggy with calc in those examples and can’t be relied upon. You would need to use an actual percentage rather than the (calc 50% - 3px) that you are using.

Unfortunately I don’t see an alternative solution for IE other than using specific % values.

1 Like
15

How would I do this?

Is it simple to do, what you’re suggesting?

16

It is as simple as spending the time needed to learn how CSS and HTML work together rather than asking for working examples that will not be used elsewhere without asking for more “help”.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>IE and Edge vs calc()</title>
<!--
https://www.sitepoint.com/community/t/why-does-one-translate-differently-from-the-other/279035/14
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
.crossed {
    width: 266px;
    height: 266px;
    border:  3px solid red;
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(0,0,0,0) 50.75%,
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,1) 0%,
           rgba(0,0,0,1) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(0,0,0,1) 50.75%,
           rgba(0,0,0,1) 100%);
}
    </style>
</head>
<body>

CSS
<div class="crossed"></div>

<br>

Html
<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49.25%, rgba(0,255,0,1) 50%, rgba(0,0,0,0) 50.75%, rgba(0,0,0,0) 100%), 
    linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 49.25%, rgba(255,230,0,1) 50%, rgba(0,0,0,1) 50.75%, rgba(0,0,0,1) 100%);">
</div>

</body>
</html>
2 Likes
17

That works on internet explorer.

18

and it works on Edge, Chrome, Vivaldi and Firefox.

19

Across all browsers, good. Thanks!!!

20

More rewarding than a “thanks” would be for you to demonstrate an understanding of why this works. We know that calc() is still not fully cross-browser compatible which is why the code “broke” when calc() was used, but why is this code functioning cross-browser? What’s different about it and why does that difference make it work? What were the calc() functions being used for and why aren’t they needed now?

2 Likes