Bug - white line around business logo

%3CLINGO-SUB%20id%3D%22lingo-sub-1394024%22%20slang%3D%22en-US%22%3EBug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1394024%22%20slang%3D%22en-US%22%3E%3CP%3EI%20uploaded%20a%20custom%20business%20logo%20-%20a%20500x500%20pixel%20.png%20file%20that%20is%20one%20solid%20color%20except%20for%20the%20logo.%20When%20it%20appears%20on%20the%20new%20booking%20page%2C%20there%20is%20a%201%20pixel%20wide%20border%20around%20the%20top%20and%20left%20edge%20that%20was%20not%20in%20the%20original%20file.%20This%20throws%20off%20the%20professional%20look%20of%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22CU03Hd6%22%20style%3D%22width%3A%20247px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F192142i809EAE7244C91330%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22CU03Hd6%22%20alt%3D%22CU03Hd6%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1394024%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EBugs%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1399771%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1399771%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F669381%22%20target%3D%22_blank%22%3E%40Function0%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20was%20unable%20to%20reproduce%20using%20this%20500x500px%20png%20file%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22500.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F192701i244B466A25306C77%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20title%3D%22500.png%22%20alt%3D%22500.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThe%20image%20is%20embossed%20so%20could%20it%20be%20your%20browser%20is%20not%20rendering%20this%20properly%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20image%20below%20is%20what%20it%20looks%20like%20on%20the%20site%20in%20Chrome%20%26amp%3B%20is%20the%20same%20in%20Firefox%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22logo.PNG%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F192702iEB5B8DA97D7E6999%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20title%3D%22logo.PNG%22%20alt%3D%22logo.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEdit%3A%20I%20have%20managed%20to%20get%20something%20similar%20to%20your%20issue%20by%20using%20the%20Firefox%20extension%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdarkreader.org%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EDarkReader%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22darkreader.PNG%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F192703i6ECA8ACE9805EA48%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20title%3D%22darkreader.PNG%22%20alt%3D%22darkreader.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1401102%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1401102%22%20slang%3D%22en-US%22%3EUsing%20a%20brand%20new%20Chrome%20browser%2C%20I%20was%20able%20to%20replicate%20the%20issue%20again.%20Perhaps%20it%20is%20the%20image%3F%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fi.imgur.com%2FW0LwxqG.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fi.imgur.com%2FW0LwxqG.png%3C%2FA%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1402912%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1402912%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F669381%22%20target%3D%22_blank%22%3E%40Function0%3C%2FA%3EJust%20gave%20it%20a%20go%20in%20Chrome%20Version%2073.0.3683.75%26nbsp%3B%20and%20it%20looks%20ok.%3C%2FP%3E%3CP%3ENo%20idea%20what%20could%20be%20causing%20it%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22W0LwxqG.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193062iACD203A71B862B85%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20title%3D%22W0LwxqG.png%22%20alt%3D%22W0LwxqG.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1404482%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1404482%22%20slang%3D%22en-US%22%3EHappens%20same%20to%20me.%20Latest%20version%20of%20New%20edge%20As%20browser.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1405188%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1405188%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F669381%22%20target%3D%22_blank%22%3E%40Function0%3C%2FA%3E%26nbsp%3BThanks%20for%20reaching%20out.%20I%20played%20around%20a%20bit%20with%20images%20and%20tried%20with%20multiple%20background%20colors%20as%20well.%20This%20white%20line%20comes%20from%20the%20image%20only.%20To%20get%20rid%20of%20this%2C%20you%20can%20crop%20the%20image%20to%20exclude%20the%20edges%2C%20and%20then%20upload%20the%20cropped%20image%20again.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%20for%20your%20interest%20and%20support%20to%20Bookings%20!!!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1405785%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%20-%20white%20line%20around%20business%20logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1405785%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F535342%22%20target%3D%22_blank%22%3E%40Radhika_Khetan_MSFT%3C%2FA%3E%26nbsp%3B%20The%20image%20is%20a%20solid%20background%20color%20with%20no%20white%20edges%20before%20it%20is%20uploaded%2C%20so%20this%20appears%20to%20be%20a%20big%20with%20the%20image%20upload%20portion%20of%20Bookings.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I uploaded a custom business logo - a 500x500 pixel .png file that is one solid color except for the logo. When it appears on the new booking page, there is a 1 pixel wide border around the top and left edge that was not in the original file. This throws off the professional look of the page.

 

CU03Hd6

11 Replies

Hi @Function0,

 

I was unable to reproduce using this 500x500px png file

500.png

The image is embossed so could it be your browser is not rendering this properly?

 

The image below is what it looks like on the site in Chrome & is the same in Firefox 

logo.PNG

 

Edit: I have managed to get something similar to your issue by using the Firefox extension DarkReader

darkreader.PNG

 

Using a brand new Chrome browser, I was able to replicate the issue again. Perhaps it is the image?

https://i.imgur.com/W0LwxqG.png

@Function0Just gave it a go in Chrome Version 73.0.3683.75  and it looks ok.

No idea what could be causing it

W0LwxqG.png

 

Happens same to me. Latest version of New edge As browser.

@Function0 Thanks for reaching out. I played around a bit with images and tried with multiple background colors as well. This white line comes from the image only. To get rid of this, you can crop the image to exclude the edges, and then upload the cropped image again.

 

Thanks for your interest and support to Bookings !!!

@Radhika_Khetan_MSFT  The image is a solid background color with no white edges before it is uploaded, so this appears to be a big with the image upload portion of Bookings.

@Radhika_Khetan_MSFT I'd love to weigh in here as well! This bug is super visible and looks unprofessional when using the Bookings service. Please escalate this internally as a bug since it's impossible to present this to a customer...

 

This bug has been present for a very long time already, while the fix should only take an engineer 30minutes (not incorporating deploy time / review time / ...)

 

The below is what I am seeing, (in all cases, the picture was created with a filled background, so no strokes applied):

* Tried 500x500 picture

* Tried PNG

* Tried JPG

* Tried removing rounded corners

 

The issue is in uploading the picture, when checking the image link I can see the conversion to image/jpeg in a base64 format, but the image was not saved correctly and shows a border.

 

msedge_PurUz0Bh0c.png

Same thing here.. multiple images, multiple formats and multiple browsers... 1px white border typically on the left and top of the image.

 

Looks like it was reported and dismissed here by MS as well - https://answers.microsoft.com/en-us/msoffice/forum/msoffice_outlook-mso_other-mso_365hp/microsoft-bo...

 

@jhardwick Did anyone find a solution to this issue? Have tried several browsers and logo formats but it's still putting in that incredibly annoying border. Looks so unprofessional...

@Beth_Ap , no I didn't and no response from Microsoft.

@Radhika_Khetan_MSFT I'm baffled as to how this is still an issue... I've uploaded our business logo in png format 240x240 pixels with a solid colour background through the "Business Information" page. It displays correctly above the menu on the left hand side with no white border:

 

GetPersonaPhoto.jpg

 

On the public bookings page where it has been scaled down to half-size (120x120 pixels) a white border has been introduced on the upper and left-hand side of the image:

 

download.jpg

 

Ofcourse you can't actually see this because the editor on this site won't let me set the background colour so you may need to inspect the images yourself.