search

ben-girardet / ecos-design-system

Design system based on FAST, compatible with Aurelia2, 11ty and more.
https://design.ecos-system.dev
0 stars 2 forks source link

Fix fix calendar display with the Date Field component #1

Closed Tamu closed 2 years ago

Tamu commented 2 years ago

Fix only for Safari 12 (iOS 12)

date-field-component

Example code in chrome

<ecos-anchored-region class="picker loaded bottom inset-left" part="picker" auto-update-mode="auto"
vertical-positioning-mode="locktodefault" vertical-threshold="100" vertical-default-position="bottom"
horizontal-default-position="left" horizontal-inset="" horizontal-positioning-mode="locktodefault"
anchor="date-field-input-1"
style="position: absolute; transform: translate(241.984px, 40.0156px); width: unset; height: unset;"
viewport=""
horizontal-scaling="content" vertical-scaling="content">
    <ecos-calendar class="calendar" part="calendar" disabled-week-days="" disabled-dates="" month="2" year="2022"
        mode="single" dates="" appearance="lightweight" min-year="1972" max-year="2024"></ecos-calendar>
</ecos-anchored-region>

Example code in iOS 12

<ecos-anchored-region class="picker" part="picker" auto-update-mode="auto"
vertical-positioning-mode="locktodefault" vertical-threshold="100" vertical-default-position="bottom"
horizontal-default-position="left" horizontal-inset="" horizontal-positioning-mode="locktodefault"
anchor="date-field-input-1"

viewport=""
horizontal-scaling="content" vertical-scaling="content">
    <ecos-calendar class="calendar" part="calendar" disabled-week-days="" disabled-dates="" month="2" year="2022"
        mode="single" dates="" appearance="lightweight" min-year="1972" max-year="2024"></ecos-calendar>
</ecos-anchored-region>

Diff

 ...  class="... loaded bottom inset-left"
  ....    
style="position: absolute; transform: translate(241.984px, 40.0156px); width: unset; height: unset;"
...

Questions

  1. Why does Fast not send styles?
  2. How to force the display of the calendar on Safari?

bug-ecos-date-field-ios12-15

Tamu commented 2 years ago

Update : The problem is related in all situations to the component "ecos-anchored-region"

ben-girardet commented 2 years ago

Did you identify more precisely the problem ?

Also, could be that FAST fixed an issue in a more recent release. Could be useful to update dependencies

Tamu commented 2 years ago

Yes, I updated dependencies: 

   "@microsoft/fast-components": "^2.25.1",
   "@microsoft/fast-element": "^1.8.0",
    "aurelia-fast-adapter": "^1.0.5",
Tamu commented 2 years ago

I created a sample code with the same issue (without the ECOS components). https://github.com/platform5/test-fast-aurelia (Aurelia 2 + latest Fast)

Tamu commented 2 years ago

Should we submit it to Fast Team? How?

Preview : fast-region-fix

ben-girardet commented 2 years ago

Yes you should definitely report it to FAST. I would first reach out to the "support" channel in Discord, this way you might have quicker answer. If it's a small thing, they might give direction on how to fix it, and if it's no small thing you will need to open an issue in their repository. But now at least we know it's a bug in anchored region component.

Tamu commented 2 years ago

Yes, thank you for the feedback. I'm going to the channel !