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.

Sign up for GitHub

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

Jump to bottom

www.pof.com - design is broken #62664

Closed
webcompat-bot opened this issue Nov 27, 2020 · 7 comments
Closed

www.pof.com - design is broken #62664

webcompat-bot opened this issue Nov 27, 2020 · 7 comments
Labels
browser-focus-geckoview engine-gecko The browser uses the Gecko rendering engine priority-normal
Milestone
duplicate

Comments

@webcompat-bot
Copy link

webcompat-bot commented Nov 27, 2020 •
edited

URL: https://www.pof.com/viewprofile?fzttwynDLEei_vCWFbJqCg

Browser / Version: Firefox Mobile 81.0
Operating System: Android 6.0.1
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
Some graphics are partial

Browser Configuration
  • None

From webcompat.com with ❤️
@webcompat-bot webcompat-bot added the action-needsmoderation The moderation has not yet been completed label Nov 27, 2020
@webcompat-bot webcompat-bot added this to the needstriage milestone Nov 27, 2020
@webcompat-bot webcompat-bot added the browser-fixme This requires manual assignment for the browser name label Nov 27, 2020
@webcompat-bot webcompat-bot changed the title In the moderation queue. www.pof.com - design is broken Dec 1, 2020
@webcompat-bot webcompat-bot added browser-focus-geckoview engine-gecko The browser uses the Gecko rendering engine priority-normal and removed action-needsmoderation The moderation has not yet been completed browser-fixme This requires manual assignment for the browser name labels Dec 1, 2020
@ksy36
Copy link
Contributor

ksy36 commented Dec 1, 2020 •
edited

Thanks for the report. I can't reach the page with that particular profile, however the logo on https://www.pof.com/login page is partially rendered in the recent Nightly (201130) on my phone:

Screen Shot 2020-11-30 at 8 44 01 PM

It's also reproducible on RDM. Lets move to needsdiagnosis

@ksy36 ksy36 modified the milestones: needstriage, needsdiagnosis Dec 1, 2020
@karlcow
Copy link
Member

karlcow commented Dec 1, 2020

This is super strange, it is like the blending of some of the colored shapes are not really working.
I wonder if it's related to SVG clip-path and blending.

Maybe it's a known issue of clip-path of SVG.
https://bugzilla.mozilla.org/buglist.cgi?list_id=15506711&resolution=---&short_desc_type=allwordssubstr&query_format=advanced&short_desc=clip-path&classification=Client%20Software&classification=Developer%20Infrastructure&classification=Components&classification=Server%20Software&classification=Other

But it doesn't remind me of any we had in the past, like we had in #25246
@birtles maybe would know.

@karlcow
Copy link
Member

karlcow commented Dec 1, 2020

The fish logo for example

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7579 28.6247C16.9357 27.0209 18.7267 24.9228 19.9652 22.4958C18.446 22.9439 16.8496 23.2113 15.2005 23.2739C14.964 24.9088 14.5247 26.4781 13.9081 27.955C13.6882 28.4817 14.2982 28.9632 14.7579 28.6247Z"
    fill="#00dcda"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1935 5.33374C20.8812 8.01622 21.8583 11.1903 21.8583 14.593C21.8583 17.4382 21.1755 20.124 19.9651 22.496C22.9517 21.6154 25.6396 20.0389 27.8399 17.9528C26.7918 12.6582 23.5945 8.13639 19.1935 5.33374Z"
    fill="#00FFDA"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1935 5.33375C16.3072 3.49568 12.9039 2.39668 9.25 2.30469C9.53114 3.62079 9.68046 4.98563 9.68046 6.38554C9.68046 6.48652 9.6782 6.58693 9.67658 6.6875C13.2138 10.2094 15.4031 15.0824 15.4031 20.4668C15.4031 21.4203 15.3332 22.3573 15.2006 23.2741C16.8497 23.2114 18.446 22.944 19.9652 22.496C21.1756 20.1241 21.8584 17.4382 21.8584 14.593C21.8584 11.1903 20.8813 8.01623 19.1935 5.33375Z"
    fill="#17265C"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59705 22.6803C11.1482 23.0781 12.774 23.2899 14.4492 23.2899C14.701 23.2899 14.9512 23.2835 15.2005 23.2741C15.3332 22.3574 15.4032 21.4203 15.4032 20.4668C15.4032 15.0824 13.2138 10.2094 9.67653 6.6875C9.62857 9.84094 8.82986 12.8122 7.45081 15.431C8.60997 17.6321 9.35901 20.0822 9.59705 22.6803Z"
    fill="#E70F89"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.50007 3.52148C7.03347 4.38695 8.43781 5.45405 9.67654 6.68747C9.67816 6.58682 9.68042 6.48649 9.68042 6.38551C9.68042 4.9856 9.5311 3.62076 9.24996 2.30466C9.08387 2.30045 8.91729 2.29834 8.75022 2.29834C7.70384 2.29834 6.67698 2.38142 5.67548 2.54078C5.18271 2.61908 5.06563 3.27628 5.50007 3.52148Z"
    fill="#8291AA"></path>
    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="8" width="7" height="14">
      <path d="M1 8.79541H7.45075V21.7133H1V8.79541Z" fill="white"></path>
    </mask>
    <g mask="url(#mask0)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.88669 8.90834C1.45079 8.58144 0.852617 9.01798 1.03289 9.53193C1.73939 11.546 2.12384 13.7112 2.12384 15.9663C2.12384 16.9039 2.05602 17.8256 1.9276 18.7279C1.81733 19.5038 1.66145 20.2649 1.46254 21.0085C1.32302 21.5303 1.93562 21.9252 2.35774 21.5882C2.90285 21.1529 3.42414 20.6891 3.9191 20.1988C5.32578 18.8051 6.52003 17.1982 7.45072 15.4309C6.09929 12.8644 4.19133 10.6367 1.88669 8.90834Z"
      fill="#00dcda"></path>
    </g>
  </g>
  <defs>
    <clipPath id="clip0">
      <rect width="130" height="26.8349" fill="white" transform="translate(1 2)"></rect>
    </clipPath>
  </defs>
</svg>

@karlcow
Copy link
Member

karlcow commented Dec 1, 2020 •
edited

The text

<div class="css-8se5n3">
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <g clip-path="url(#clip0)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7579 28.6247C16.9357 27.0209 18.7267 24.9228 19.9652 22.4958C18.446 22.9439 16.8496 23.2113 15.2005 23.2739C14.964 24.9088 14.5247 26.4781 13.9081 27.955C13.6882 28.4817 14.2982 28.9632 14.7579 28.6247Z"
      fill="#00dcda"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1935 5.33374C20.8812 8.01622 21.8583 11.1903 21.8583 14.593C21.8583 17.4382 21.1755 20.124 19.9651 22.496C22.9517 21.6154 25.6396 20.0389 27.8399 17.9528C26.7918 12.6582 23.5945 8.13639 19.1935 5.33374Z"
      fill="#00FFDA"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1935 5.33375C16.3072 3.49568 12.9039 2.39668 9.25 2.30469C9.53114 3.62079 9.68046 4.98563 9.68046 6.38554C9.68046 6.48652 9.6782 6.58693 9.67658 6.6875C13.2138 10.2094 15.4031 15.0824 15.4031 20.4668C15.4031 21.4203 15.3332 22.3573 15.2006 23.2741C16.8497 23.2114 18.446 22.944 19.9652 22.496C21.1756 20.1241 21.8584 17.4382 21.8584 14.593C21.8584 11.1903 20.8813 8.01623 19.1935 5.33375Z"
      fill="#17265C"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59705 22.6803C11.1482 23.0781 12.774 23.2899 14.4492 23.2899C14.701 23.2899 14.9512 23.2835 15.2005 23.2741C15.3332 22.3574 15.4032 21.4203 15.4032 20.4668C15.4032 15.0824 13.2138 10.2094 9.67653 6.6875C9.62857 9.84094 8.82986 12.8122 7.45081 15.431C8.60997 17.6321 9.35901 20.0822 9.59705 22.6803Z"
      fill="#E70F89"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.50007 3.52148C7.03347 4.38695 8.43781 5.45405 9.67654 6.68747C9.67816 6.58682 9.68042 6.48649 9.68042 6.38551C9.68042 4.9856 9.5311 3.62076 9.24996 2.30466C9.08387 2.30045 8.91729 2.29834 8.75022 2.29834C7.70384 2.29834 6.67698 2.38142 5.67548 2.54078C5.18271 2.61908 5.06563 3.27628 5.50007 3.52148Z"
      fill="#8291AA"></path>
      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="8" width="7" height="14">
        <path d="M1 8.79541H7.45075V21.7133H1V8.79541Z" fill="white"></path>
      </mask>
      <g mask="url(#mask0)">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.88669 8.90834C1.45079 8.58144 0.852617 9.01798 1.03289 9.53193C1.73939 11.546 2.12384 13.7112 2.12384 15.9663C2.12384 16.9039 2.05602 17.8256 1.9276 18.7279C1.81733 19.5038 1.66145 20.2649 1.46254 21.0085C1.32302 21.5303 1.93562 21.9252 2.35774 21.5882C2.90285 21.1529 3.42414 20.6891 3.9191 20.1988C5.32578 18.8051 6.52003 17.1982 7.45072 15.4309C6.09929 12.8644 4.19133 10.6367 1.88669 8.90834Z"
        fill="#00dcda"></path>
      </g>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="130" height="26.8349" fill="white" transform="translate(1 2)"></rect>
      </clipPath>
    </defs>
  </svg>
  <svg width="125" height="32" viewBox="0 0 125 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <mask id="maskLogoText0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="11" height="17">
      <path d="M2.51807 1.81982H12.74V17.126H2.51807V1.81982Z" fill="white"></path>
    </mask>
    <g mask="url(#maskLogoText0)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.62867 9.42973C9.16217 9.42973 10.0612 8.3948 10.0612 6.79965C10.0612 5.2261 9.16217 4.21277 7.67004 4.21277H5.15517V9.42973H7.62867ZM2.51782 1.81982H8.11936C10.8386 1.81982 12.7399 3.82445 12.7399 6.79965C12.7399 9.77485 10.8386 11.8443 8.11936 11.8443H5.15517V17.126H2.51782V1.81982Z"
      fill="#182D77"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.509 1.78442H16.9631V13.2931C16.9631 14.5045 17.333 14.807 17.9762 14.807C18.1709 14.807 18.3462 14.7854 18.3462 14.7854V17.1865C18.3462 17.1865 17.9762 17.252 17.5672 17.252C16.2036 17.252 14.509 16.8623 14.509 13.704V1.78442Z"
    fill="#182D77"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.7198 10.0826C26.6778 8.58415 25.7853 7.78027 24.6219 7.78027C23.2722 7.78027 22.3376 8.64899 22.0884 10.0826H26.7198ZM24.6843 5.65112C27.7371 5.65112 29.3782 7.97569 29.3782 10.9083C29.3782 11.2343 29.3153 11.9729 29.3153 11.9729H22.0056C22.1716 13.9062 23.6046 14.9054 25.1828 14.9054C26.8854 14.9054 28.2356 13.689 28.2356 13.689L29.2533 15.6658C29.2533 15.6658 27.6331 17.2518 24.9956 17.2518C21.4863 17.2518 19.3057 14.6012 19.3057 11.4514C19.3057 8.04098 21.5275 5.65112 24.6843 5.65112Z"
    fill="#182D77"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M31.7764 5.90672H34.2145V7.16335C34.2145 7.56829 34.1745 7.9088 34.1745 7.9088H34.2145C34.6542 6.9931 35.7734 5.65112 37.8319 5.65112C40.0903 5.65112 41.3692 6.90819 41.3692 9.78288V16.7684H38.8514V10.3367C38.8514 9.01609 38.5315 8.12173 37.2325 8.12173C35.8731 8.12173 34.874 9.03786 34.4944 10.3367C34.3543 10.7843 34.3146 11.2738 34.3146 11.785V16.7684H31.7764V5.90672Z"
    fill="#182D77"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M44.6856 8.0663H43.2876V5.90161H44.7493V2.75098H47.3759V5.90161H49.8333V8.0663H47.3759V12.3102C47.3759 14.1103 48.7739 14.368 49.5154 14.368C49.812 14.368 50.0026 14.3246 50.0026 14.3246V16.7036C50.0026 16.7036 49.6847 16.7684 49.1763 16.7684C47.6726 16.7684 44.6856 16.3184 44.6856 12.6533V8.0663Z"
    fill="#182D77"></path>
    <mask id="maskLogoText1" mask-type="alpha" maskUnits="userSpaceOnUse" x="51" y="5" width="11" height="17">
      <path d="M51.1074 5.67847H61.667V21.2009H51.1074V5.67847Z" fill="white"></path>
    </mask>
    <g mask="url(#maskLogoText1)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M52.1295 18.4414C52.1295 18.4414 52.6903 18.8945 53.2716 18.8945C53.9729 18.8945 54.6542 18.4414 55.0348 17.4713L55.4157 16.5011L51.1074 5.67847H53.9729L56.117 12.0172C56.3174 12.5994 56.4976 13.5043 56.4976 13.5043H56.5374C56.5374 13.5043 56.6979 12.6422 56.8782 12.0604L58.8818 5.67847H61.667L57.0986 18.3338C56.3772 20.3389 54.9545 21.2011 53.4117 21.2011C52.1893 21.2011 51.2877 20.4897 51.2877 20.4897L52.1295 18.4414Z"
      fill="#182D77"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M68.9485 15.9649C71.1883 15.9649 73.0127 14.1082 73.0127 11.6403C73.0127 9.23548 71.1883 7.44261 68.9485 7.44261C66.7087 7.44261 64.8839 9.23548 64.8839 11.6403C64.8839 14.1082 66.7087 15.9649 68.9485 15.9649ZM68.9485 6.13452C71.9968 6.13452 74.4644 8.49711 74.4644 11.6403C74.4644 14.8465 71.9968 17.2518 68.9485 17.2518C65.9001 17.2518 63.4326 14.8465 63.4326 11.6403C63.4326 8.49711 65.9001 6.13452 68.9485 6.13452Z"
    fill="#182D77"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M77.1438 7.45633H75.9033V6.24995H77.1438V5.74195C77.1438 2.22881 79.4474 1.78442 80.5696 1.78442C80.9435 1.78442 81.1794 1.82683 81.1794 1.82683V3.11802C81.1794 3.11802 80.9826 3.07519 80.7072 3.07519C79.9393 3.07519 78.4826 3.37159 78.4826 5.74195V6.24995H81.022V7.45633H78.4826V16.7686H77.1438V7.45633Z"
    fill="#182D77"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M85.4961 1.78442H93.65V4.12696H88.074V8.36888H92.7707V10.7114H88.074V16.7686H85.4961V1.78442Z" fill="#182D77"></path>
    <mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="125" height="21">
      <path d="M0.119873 20.6354H124.347V0.817627H0.119873V20.6354Z" fill="white"></path>
    </mask>
    <g mask="url(#mask2)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M95.5686 16.7686H97.9669V6.00491H95.5686V16.7686ZM95.5686 4.16931H97.9479V1.78442H95.5686V4.16931Z" fill="#182D77"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M101.569 13.689C101.569 13.689 102.731 14.9054 104.452 14.9054C105.199 14.9054 105.842 14.5577 105.842 13.9062C105.842 12.2549 100.697 12.4725 100.697 8.91013C100.697 6.84583 102.461 5.65112 104.743 5.65112C107.129 5.65112 108.291 6.91155 108.291 6.91155L107.316 8.95322C107.316 8.95322 106.34 7.99745 104.722 7.99745C104.038 7.99745 103.374 8.30168 103.374 8.99674C103.374 10.561 108.519 10.3651 108.519 13.9279C108.519 15.7742 106.983 17.2518 104.473 17.2518C101.838 17.2518 100.365 15.6218 100.365 15.6218L101.569 13.689Z"
      fill="#182D77"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M110.438 1.78442H112.976V6.97605C112.976 7.50333 112.936 7.88346 112.936 7.88346H112.976C113.475 6.84962 114.714 5.75193 116.493 5.75193C118.751 5.75193 120.03 6.99719 120.03 9.84586V16.7686H117.512V10.3947C117.512 9.08644 117.193 8.20017 115.894 8.20017C114.554 8.20017 113.516 9.12873 113.136 10.437C113.015 10.8594 112.976 11.3237 112.976 11.8302V16.7686H110.438V1.78442Z"
      fill="#182D77"></path>
    </g>
  </svg>
  <div id="pof-logo" class="css-1vtb6dy">Plenty Of Fish Homepage</div>
</div>

@karlcow
Copy link
Member

karlcow commented Mar 4, 2021

Ah not at all an issue with SVG, but more an interaction in between blocks which is super strange.

in html body.mobile div div#react-app div#rebrand div.container-fluid there are 3 divs.

Capture d’écran 2021-03-04 à 15 47 57

When we remove the invisible dashboard #dashboard… by erasing this part of the markup in the devtools, the issue is going away, the logo appears and the full text, even with the current CSS being:

.container-fluid #dashboard.menu-closed, .container-fluid #scene-container.menu-open {
	display: none !important;
	visibility: hidden !important;
}

Would it be an issue with painting? @emilio

@karlcow
Copy link
Member

karlcow commented Mar 4, 2021

I will open a core bug.

@karlcow
Copy link
Member

karlcow commented Mar 4, 2021

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1696333

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-focus-geckoview engine-gecko The browser uses the Gecko rendering engine priority-normal
Projects
None yet
Milestone
duplicate
Development

No branches or pull requests
3 participants
@karlcow @ksy36 @webcompat-bot