0

enter image description here

I have the above Textarea displaying some dynamic address, it displays and keeps my CSS styling as wanted in Chrome (Version 67.0.3396.99 (Official Build) (64-bit) ) with no border or other issues but in IE11 (11.1540.10586.0) the border keeps showing.

This gif above is from IE illustrating the issue.

You can see on first Render the outline is blue, then if you highlight and select with a mouse the color changes to black and then if you keep doing the same thing over and over it eventually disappears. End users will be hurt.

Although not responsible here stack is: ReactJS, jQuery, etc. vanilla.

Style is:

const AddressResults = {
  backgroundColor: '#fff',
  width: '220%',
  border: 'white',
  outlinWidth: '0',
  outline: 'none',
  color: 'black',
  padding: '0px',
  fontFamily: 'Arial',
  fontSize: 14,
  fontColor: 'Black',
};

Is this really a CSS issue or timing issue since my data is loaded after DOM has completed render? Just to add it's intermittent and not happening all the time and as well as the line is broken up sometimes.

So also maybe hinting monitor or OS level issue?

UPDATE: Locally I can see it's working on the Workbench...it happens so that locally the borders appear around the textarea for a split second and then disappear....almost blind to end users but I caught it!

2
  • Could it have something to do with the incorrect syntax? "outlinWidth" should be "outlineWidth", note the missing "e". Commented Aug 21, 2018 at 18:40
  • Thanks Heather, no actually it was because I did not have a overflow that's hidden: overflow: 'hidden' . Why? I really don't know but it worked :-)
    – amssf
    Commented Aug 22, 2018 at 15:56

1 Answer 1

0

The CSS that fixed it was: overflow: 'hidden'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.