Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: general - check cross-browser compatibility #732

Closed
catlabs opened this issue Sep 28, 2018 · 6 comments · Fixed by #996
Closed

ui: general - check cross-browser compatibility #732

catlabs opened this issue Sep 28, 2018 · 6 comments · Fixed by #996

Comments

@catlabs
Copy link
Contributor

catlabs commented Sep 28, 2018

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

I have checked briefly on internet explorer, doesn't look bad but some adjustments should be done.

Expected behavior

Check the showcase on different browsers if the app is correctly displayed.

@christophercr
Copy link
Collaborator

christophercr commented Nov 13, 2018

Some issues found so far:

On Internet Explorer:

Message Pane demo page
issue-demo-message-pane

And on mobile:
issue-demo-message-pane-mobile


Headings in most of the pages
issue-demo-pages-heading

which is most likely related to this error in the console:

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
Q4VhAPMA0GCSqGSIb3DQEBAQUABIGAHcF3ia6bbyLja+VF2k6RQPCf7zsfJ0pWrDr9qJRqfPecwX97k2BOG8QrV5WUyxbhmmcz0SspE8jsvrxZsQOkKZnsHYiZJId3D5vKFPvU1ElMdA7IPS5vIMkDzejlD9AhObNWGdX7rL2sqTi9sNUMo9ljrbCVtGhYw+LXKf+RpMcAAA==

DatePicker
The last days of the month bleed out of the picker (I think this happens in Chrome as well):
issue-demo-date-picker


Table

When showing the Global filter or any Column filter in the Table:
issue-demo-table

This error is thrown:

"TypeError: Unable to get property 'opacity' of undefined or null reference
   at e.prototype.computeStyle (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3732201)
   at Anonymous function (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3723983)
   at forEach (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:215009)
   at Anonymous function (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3723961)
   at forEach (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:215009)
   at Ze (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3723928)
   at e.prototype._flushAnimations (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3717275)
   at e.prototype.flush (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3713800)
   at e.prototype.flush (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:3726324)
   at Anonymous function (http://localhost:8080/vendor.049f5eec4befc883d9cb.chunk.js:1:825282)"

Menu on mobile
The Stark icon is not centered:
issue-menu-mobile


Minimap demo page
The minimap popup div is rendered in the wrong position on mobile (I think this happens in Chrome as well):
issue-demo-minimap


Header
When scrolling with the mouse in any page, the header does an strange flickering. It doesn't happen if the scroll is done by dragging the scroll bar.

@carlo-nomes carlo-nomes self-assigned this Nov 15, 2018
@christophercr christophercr changed the title ui: general - check browsers compatibility ui: general - check cross-browser compatibility Dec 17, 2018
@carlo-nomes
Copy link
Collaborator

dropdown schrinks in IE11

screen recording 2019-01-02 at 14 26 36

carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
Fixes issue in IE11 resizing element to the max-width instead of the min-width

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
…d IE11

  - decrease font-size of button when screen is small (mobile)
  - remove flex functionality from fieldsets (not supported)

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
  - Set view encapsulation to none
  - changed right property

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
Fixes issue in IE11 resizing element to the max-width instead of the min-width

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
  - Set view encapsulation to none
  - changed right property

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 2, 2019
Fixes issue in IE11 resizing element to the max-width instead of the min-width

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
…d IE11

  - decrease font-size of button when screen is small (mobile)
  - remove flex functionality from fieldsets (not supported)

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
Fixes issue in IE11 resizing element to the max-width instead of the min-width

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
Fixes issue in IE11 when animating table filter menu.

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
  - changed right property
  - small refactor `_minimap.component.scss`

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
  - prior to this fix IE11 would throw an error when setting this property
  - updated tests to use content of li instead of the (now removed) value property

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
replaced fixed size of 18px with `transform: scale(.75)` the default is 24px so it should scale to 18px

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
Fixes issue in IE11 when animating table filter menu.

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
  - changed right property
  - small refactor `_minimap.component.scss`

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
  - prior to this fix IE11 would throw an error when setting this property
  - updated tests to use content of li instead of the (now removed) value property

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 9, 2019
replaced fixed size of 18px with `transform: scale(.75)` the default is 24px so it should scale to 18px

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
…d IE11

  - decrease font-size of button when screen is small (mobile)
  - remove flex functionality from fieldsets (not supported)

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
Fixes issue in IE11 when animating table filter menu.

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
  - changed right property
  - small refactor `_minimap.component.scss`

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
  - prior to this fix IE11 would throw an error when setting this property
  - updated tests to use content of li instead of the (now removed) value property

ISSUE: NationalBankBelgium#732
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
carlo-nomes added a commit to carlo-nomes/stark that referenced this issue Jan 11, 2019
replaced fixed size of 18px with `transform: scale(.75)` the default is 24px so it should scale to 18px

ISSUE: NationalBankBelgium#732
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants