search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
746 stars 66 forks source link

myaccount.google.com - Uploaded profile images is broken #29937

Closed softvision-oana-arbuzov closed 5 years ago

softvision-oana-arbuzov commented 5 years ago

URL: https://myaccount.google.com/

Browser / Version: Firefox Nightly 68.0a1 (2019-04-22) Operating System: Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density) Tested Another Browser: Yes

Problem type: Design is broken Description: Uploaded profile images is broken

Prerequisites:

  1. Google account created and signed in. Steps to Reproduce:
  2. Navigate to https://myaccount.google.com/
  3. Tap the profile images.
  4. Tap “Drag a profile photo here" area.
  5. After “File Upload” menu is displayed, tap “Files”.
  6. Choose an image from your mobile device and wait until it is being uploaded.
  7. Observe the image.

Expected Behavior: Image is visible and can be cropped.

Actual Behavior: Image is not visible, broken icon is displayed.

Note

  1. Not reproducible on Chrome 73.0.3683.90.
  2. Also reproducible uploading images created with mobile device camera or selected from “Your photos" or "Photos of you" sections.
  3. Screenshot attached. Affected area: 
    <div class="Nf-ml-eb Nf-om-eb" style="top: 40px;">
<div class="Nf-ml-oi Nf-eb Nf-mo-oi">
    <div class="Nf-ml-hc Nf-mo-Md" style="height: 15px;">
        <div class="Nf-go-tc" id=":3h">To crop this image, drag the region below and then click "Set as profile photo"</div>
    </div>
    <div class="Nf-ml-eb Nf-mo-eb" tabindex="0" aria-labelledby=":3h" style="top: 30px;">
        <div class="Nf-go-eb">
            <div class="Nf-go-fg">
                <img style="transform: rotate(0deg); opacity: 1; left: 175px; top: 36px; position: absolute;" src="https://lh3.googleusercontent.com/-V2SE5tyCmoM/XMBRXjT5DhI/AAAAAAAACBE/Vlf-SgFQsu810lxY56gmcvpRddLTM9ckACLcBGAs/s-20/20181221_094846.jpg">
                    <div style="width: 0px; height: 0px; left: 175px; top: 36px; position: absolute;">
                        <div class="Nf-lo"></div>
                        <div class="Nf-io" style="cursor: ne-resize;">
                            <div class="Nf-jo"></div>
                        </div>
                        <div class="Nf-io" style="cursor: sw-resize;">
                            <div class="Nf-jo"></div>
                        </div>
                        <div class="Nf-io" style="cursor: se-resize;">
                            <div class="Nf-jo"></div>
                        </div>
                        <div class="Nf-io" style="cursor: nw-resize;">
                            <div class="Nf-jo"></div>
                        </div>
                        <div>
                            <div class="Nf-no" style="width: 0px; top: 0px; left: 0px;"></div>
                            <div class="Nf-no"></div>
                            <div class="Nf-no" style="left: 0px; width: 0px;"></div>
                            <div class="Nf-no" style="left: 0px;"></div>
                        </div>
                        <div class="Nf-ho"></div>
                    </div>
                </div>
                <div class="Nf-go-Vi-pl"></div>
                <div class="Nf-Cg-ob Nf-Cg-ob-dc Nf-Nc-ob" style="-moz-user-select: none; opacity: 1; top: 41px; left: 227px;" role="toolbar" tabindex="0" align="">
                    <div class="a-u" role="button" style="-moz-user-select: none;" id="editbar-rotate-left">
                        <div aria-label="Rotate left">
                            <div class="Nf-Xl-Nc-ln-mn Nf-Nc-ob-f a-b-c"></div>
                            <div class="Nf-Nc-ob-y a-b-c">Left</div>
                        </div>
                    </div>
                    <div class="a-u" role="button" style="-moz-user-select: none;" id="editbar-rotate-right">
                        <div aria-label="Rotate right">
                            <div class="Nf-Xl-Nc-ln-nn Nf-Nc-ob-f a-b-c"></div>
                            <div class="Nf-Nc-ob-y a-b-c">Right</div>
                        </div>
                    </div>
                </div>
                <div class="Nf-Cg-mb" style="width: 104px; top: 41px; left: 123px;">
                    <div class="Nf-Cg-mb-Eb" style="width: 100%;">Add Caption</div>
                </div>
            </div>
        </div>
    </div>
</div>

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

sv; Screenshot Description

Browser Configuration
  • None

From webcompat.com with ❤️

karlcow commented 5 years ago

@softvision-oana-arbuzov on a pixel 2 device and latest Firefox Nightly, I tried with png and jpg images, it doesn't reproduce.

softvision-oana-arbuzov commented 5 years ago

@karlcow I'm still able to reproduce the issue. image

BrokenImage

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-05-12) Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

karlcow commented 5 years ago

ok let's try again. 👺

@softvision-oana-arbuzov

And it's always working. :)

softvision-oana-arbuzov commented 5 years ago

@karlcow I've checked on Google Pixel (Android ) - 1080 x 1920 pixels (~441 ppi pixel density) and on Sony Xperia Z2 (Android 6.0.1) - 1080 x 1920 pixels (~424 ppi pixel density) it is not reproducible, but it is still reproducible on other devices (S7 edge and LG G7). image

image

image

karlcow commented 5 years ago

ok. I start to feel a bit better. There are devices this is working and some devices this is not. Thanks a lot @softvision-oana-arbuzov

It fails when there is a 7 in the name and it rains from an east wind. (kidding).

What could be the difference?

@softvision-oana-arbuzov what is the UA string on your Samsung Galaxy S7 Edge (Android 8.0.0)? So we can see if it's coming from the UA string or if it's something else. Maybe we will be able to figure out.

softvision-oana-arbuzov commented 5 years ago

@karlcow

Reproducible on: Samsung Galasy S7: UA - Mozilla/5.0 (Android 8.0.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0 LG G5: UA - Mozilla/5.0 (Android 8.0.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0

Not reproducible on: Sony Xperia Z2: UA - Mozilla/5.0 (Android 6.0.1; Tablet; rv:68.0) Gecko/68.0 Firefox/68.0 Fire HD: UA - Mozilla/5.0 (Android 7.1.2; Tablet; rv:68.0) Gecko/68.0 Firefox/68.0

karlcow commented 5 years ago

interesting for you it is not reproducible on tablet but on mobile. I just tested on Mobile. and the two devices where it fails for you are on Android 8.0.0 I wonder if it's related.

Ah… maybe… https://docs.google.com/picker?protocol=gadgets&origin=https%3A%2F%2Fmyaccount.google.com&profilePhoto=true&hostId=ac&thumbs=88-c&hl=en-GB&authuser=0&groupId=109685249434177437958&relayUrl=https%3A%2F%2Fmyaccount.google.com%2Ffavicon.ico&nav=((%22upload%22%2C%2C%7B%22query%22%3A%22profile%22%2C%22data%22%3A%7B%22silo_id%22%3A%2249%22%7D%7D)%2C(%22photos%22)%2C(%22photos%22%2C%2C%7B%22type%22%3A%22ofuser%22%7D))&rpctoken=*&rpcService=*

The photo picker is an iframe. I was looking at the URI, and I was wondering if there was a difference for this URI in between the devices who have the issue and those who don't.

softvision-oana-arbuzov commented 5 years ago

@karlcow

LG G5 phone

<iframe id="vdv0qqs3x65a" name="vdv0qqs3x65a" class="fFW7wc-OEVmcd" allow="camera" src="https://docs.google.com/picker?protocol=gadgets&amp;origin=https%3A%2F%2Fmyaccount.google.com&amp;profilePhoto=true&amp;hostId=ac&amp;thumbs=88-c&amp;hl=en-GB&amp;authuser=0&amp;groupId=100299486014279262379&amp;relayUrl=https%3A%2F%2Fmyaccount.google.com%2Ffavicon.ico&amp;nav=((%22upload%22%2C%2C%7B%22query%22%3A%22profile%22%2C%22data%22%3A%7B%22silo_id%22%3A%2249%22%7D%7D)%2C(%22photos%22)%2C(%22photos%22%2C%2C%7B%22type%22%3A%22ofuser%22%7D))&amp;rpctoken=bvg854f3m5z7&amp;rpcService=vdv0qqs3x65a" tabindex="0" frameborder="0"></iframe>

FireHD 8 tablet

<iframe id="ccw8bse2md8m" name="ccw8bse2md8m" class="fFW7wc-OEVmcd" allow="camera" src="https://docs.google.com/picker?protocol=gadgets&amp;origin=https%3A%2F%2Fmyaccount.google.com&amp;profilePhoto=true&amp;hostId=ac&amp;thumbs=88-c&amp;hl=en-GB&amp;authuser=0&amp;groupId=100299486014279262379&amp;relayUrl=https%3A%2F%2Fmyaccount.google.com%2Ffavicon.ico&amp;nav=((%22upload%22%2C%2C%7B%22query%22%3A%22profile%22%2C%22data%22%3A%7B%22silo_id%22%3A%2249%22%7D%7D)%2C(%22photos%22)%2C(%22photos%22%2C%2C%7B%22type%22%3A%22ofuser%22%7D))&amp;rpctoken=k3tf02d20mm0&amp;rpcService=ccw8bse2md8m" tabindex="0" frameborder="0"></iframe>
miketaylr commented 5 years ago

If it's device specific, it should probably be moved. @softvision-oana-arbuzov does this reproduce in Fenix Preview? If so, can you file a bug in the fenix repo? Thanks.

softvision-oana-arbuzov commented 5 years ago

@miketaylr , the issue is reproducible on Fenix. image

Tested with: Browser / Version: Fenix 1.1.0 (Build #12042112) 📦: 4.0.1 🦎: 68.0-20190711090008 Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

karlcow commented 5 years ago

Duplicate of https://github.com/mozilla-mobile/fenix/issues/4636

lock[bot] commented 5 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.