www.ryanair.com - “Next” button arrow is displayed misaligned

[softvision-oana-arbuzov]

URL: https://www.ryanair.com/gb/en/booking/home/OTP/SXF/2018-09-20/2018-10-02/1/0/0/0

Browser / Version: Firefox Nightly 64.0a1 (2018-09-18) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: “Next” button arrow is displayed misaligned Steps to Reproduce: Prerequisites

1. Account created and signed in. Steps to Reproduce
2. Navigate to https://www.ryanair.com/gb/en/booking/home/OTP/SXF/2018-09-20/2018-10-02/1/0/0/0
3. Observe “Next” button arrow.

Expected Behavior: Arrow is aligned (centered in the button).

Actual Behavior: Arrow is misaligned.

Note:

1. Not reproducible on Firefox Release 62.0 and Chrome 69.0.3479.92.
2. Screenshot attached.
3. Affected area:

   <div class="button">
   <button ng-click="goToNext()" class="arrow right" ng-class="{ 'arrow-disabled': carouselArrowsConfig.next.disabled }">
       <core-icon icon-id="glyphs.chevron" ng-click="slideToNextMonth()" class="arrow right">
           <div>
               <svg tabindex="-1" focusable="false" role="img">
                   <use xlink:href="/gb/en/booking/home/OTP/SXF/2018-09-20/2018-10-02/1/0/0/0#glyphs.chevron" ng-href="/gb/en/booking/home/OTP/SXF/2018-09-20/2018-10-02/1/0/0/0#glyphs.chevron"></use>
               </svg>
           </div>
       </core-icon>
       <!---->
       <tooltip-callout class="flight-fares-carousel__btn-tooltip flight-fares-carousel__btn-tooltip--right" ng-if="disabledArrowTooltip" visibility-expression="disabledArrowTooltip[1]" timeout="4500">
           <div class="tooltip-callout-content" style="visibility: hidden;">
               <ng-transclude>
                   <span translate="trips.flight_fares_carousel.info." translate-default=""></span>
               </ng-transclude>
           </div>
       </tooltip-callout>
       <!---->
   </button>
   </div>

Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov

sv; country: us

From webcompat.com with ❤️

[karlcow]

The issue reproduced without being logged in.

The button on the left side is correctly aligned.

huh…

.base-carousel .button .right svg {
    left: 11px;
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    -moz-transform: rotate(270deg) translate(-6px);
}

I'm not sure why the translate is there, but they can do either:

.base-carousel .button .right svg {
 left:11px;
 -ms-transform:rotate(270deg);
 -moz-transform:rotate(270deg) translate(-6px);
 transform:rotate(270deg);
}

or even better just

.base-carousel .button .right svg {
 left:11px;
 -ms-transform:rotate(270deg);
 transform:rotate(270deg);
}

[softvision-sergiulogigan]

The issue is still reproducible.

Tested with: Browser / Version: Firefox Nightly 72.0a1 (2019-11-03) Operating System: Windows 10 Pro

[softvision-oana-arbuzov]

The issue has been fixed. The arrows are centered now.

Tested with: Browser / Version: Firefox Nightly 82.0a1 (2020-08-24) Operating System: Windows 10 Pro