CODEWITHSUNDEEP
cssinternet-explorerwebpseudo-elementmicrosoft-edge
Oreflow
Oreflow

Reputation: 607

Can not read border style from pseudo elements in Microsoft Edge and IE

In an web project that I'm working on we use JavaScript to render big, complex web pages. We are currently working on a way to be able to move parts of the page to another tab/ send the content as a string and render the same content on another computer/browser looking just as the original page.

We could use the same scripts to rerender the page but when rerendering performance is of utmost importance and therefore we want to avoid it. So our approach has been to iterate over the relevant elements and abstract the elements together with their current styling using getComputedStyle(). This method works well, however we have encountered some problems including pseudoelements.

To include them we have gotten the styling using

 getComputedStyle(element, ':after');

which works well in Chrome. However, In IE and Microsoft Edge this only works most of the cases. One case that does not work is if the pseudo element has a border. Then the border-style is not included in the CSSStyleDeclaration returned from the function.

So my questions are:

Minimal example reproducing the error in fiddle. When clicking the button Chrome outputs:

border-bottom: 1px solid rgb(255, 0, 0)
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: solid
border-bottom-width: 1px

while Edge outputs:

border-bottom: 
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: none
border-bottom-width: 1px

Upvotes: 3

Views: 835

Answers (1)

John Williams
John Williams

Reputation: 11

I'm sure you have solved this another way by now... but as the problem still exists today in Edge; here is a work-around for it.

The issue is that for border-style IE is returning the parent elements value instead of the pseudo elements, so if you set the style there, and give it no width, the pseudo element will inherit it. Extracting from your fiddle to example...

#pseudo-element-test-id {
    position: relative;
    border-bottom: 0 solid;
}
#pseudo-element-test-id::after {
    position: absolute;
    top: 15px;
    left: 0;
    content: " ";
    width: 150px;
    border-bottom: 1px solid red;    
}

Upvotes: 1

Related Questions